<template>
  <div class="container-home">
    <div class="header">
      <img class="title" :src="title" alt="居民服务 “一码通”" />
      <div class="top-menus">
        <!--<div class="top-menu" v-for="(topMenu, key) in topMenus" :key="key">
                  <img class="top-menu_icon" :src="topMenu.icon" alt="" />
                  <span class="top-menu_name">{{ topMenu.name }}</span>
                </div>-->
        <div @click="handleGo('/building')" class="top-menu">
          <img class="top-menu_icon" :src="topMenus[0].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[0].name }}</span>
        </div>
        <div @click="spreadCode" class="top-menu">
          <img class="top-menu_icon" :src="topMenus[1].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[1].name }}</span>
        </div>
        <div @click="handleGo('/code/mine/notice')" class="top-menu">
          <img class="top-menu_icon" :src="topMenus[2].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[2].name }}</span>
        </div>
        <div class="top-menu" @click="handleGo('/code/mine')">
          <img class="top-menu_icon" :src="topMenus[3].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[3].name }}</span>
        </div>
      </div>
    </div>
    <div class="header--fixed" v-if="isHeaderFixed">
      <!--<img
                v-for="(topMiniMenu, key) in topMiniMenus"
                :key="key"
                :src="topMiniMenu.icon"
                alt=""
            />-->
      <div class="fixed-left">居民服务 “ 一码通 ”</div>
      <div class="fixed-right">
        <img
          @click="handleGo('/building')"
          :src="topMiniMenus[0].icon"
          alt=""
        />
        <img @click="spreadCode" :src="topMiniMenus[1].icon" alt="" />
        <img
          @click="handleGo('/code/mine/notice')"
          :src="topMiniMenus[2].icon"
          alt=""
        />
        <img
          @click="handleGo('/code/mine')"
          :src="topMiniMenus[3].icon"
          alt=""
        />
      </div>
    </div>
    <div class="home-main">
      <div class="banners">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(banner, key) in banners" :key="key">
            <img class="banner" :src="banner.img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div v-if="centerMenus.length > 0" class="white-bg"></div>
      <div class="link" v-if="centerMenus.length > 0">
        <van-tabs v-model="active" scrollspy sticky>
          <van-tab v-for="(item, index) in centerMenus" :key="index">
            <div slot="title" class="link-tab-title">
              <img
                :src="item.iconSelected"
                v-if="active === index"
                width="30"
              />
              <img :src="item.icon" v-else width="30" />
              <p :class="active === index ? 'link-tab-p' : 'link-tab-p-d'">
                {{ item.name }}
              </p>
            </div>
            <div class="link-subItem">
              <p class="subItem-title">{{ item.name }}</p>
              <div class="subItem-content">
                <div
                  @click="handleItem(items)"
                  class="subItem-items"
                  v-for="(items, j) in item.bottomMenus"
                  :key="j"
                >
                  <div class="items-content">
                    <img :src="items.icon" width="40" />
                    <p>{{ items.name }}</p>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
const $ = require("jquery");
const title = require("@/assets/img/home_title.png");
import { getSSCApplyInfo, getSSCSign } from "@/apis/test";
import config from "../test/config";
import localData from "../../assets/localData";
// import { storage } from "../../plugins/storage";
// import * as types from "../../store/mutation-types";

export default {
  name: "CodeHome",
  data() {
    return {
      title,
      scrollY: 0,
      active: 0,
      bottomTops: [],
      topMenus: localData.topMenus,
      topMiniMenus: localData.topMiniMenus,
      // banners: localData.banner,
      banners: [],
      centerMenus: [],
      centerActive: 0,
      bottomMenus: [],
      isHeaderFixed: false
    };
  },
  mounted() {
    this.checkSession();
    // this.getMenus();
    this.centerActive = 0;
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    checkSession() {
      let session = sessionStorage.getItem("home_menus");
      this.getBanner();
      if (session) {
        this.centerMenus = JSON.parse(session);
        this.bottomMenus = this.centerMenus[0].bottomMenus;
      } else {
        this.getMenus();
      }
    },
    async getBanner() {
      let res = await this.api.banner();
      this.banners = this.modelFunctions.transBanner(res.data);
    },
    async getMenus() {
      let res = await this.api.getScene();
      if (res.data && res.data.length > 0) {
        this.setMenus(res.data);
      }
      // this.api.getFunc().then(res => {
      //   this.centerMenus = this.modelFunctions.setMenus(res.data);
      //   this.bottomMenus = this.centerMenus[0].bottomMenus;
      // });
    },
    async setMenus(data) {
      let result = await this.api.getFunc();
      if (result.data && result.data.length > 0) {
        this.centerMenus = this.modelFunctions.transMenus(data, result);
        this.bottomMenus = this.centerMenus[0].bottomMenus;
        sessionStorage.setItem("home_menus", JSON.stringify(this.centerMenus));
      }
    },
    handleItem(item) {
      this.obtainDetail(item.id);
    },
    async obtainDetail(data) {
      // https://service.neuqsoft.com/ggfw/citizen/rest/app/api/v1/image/
      let res = await this.api.obtainFuncDetail(data);
      if (res && res.data) {
        res.data.icon =
          "./rest/app/api/v1/image/" +
          res.data.icon;
        sessionStorage.setItem("jump_id", JSON.stringify(res.data));
        this.$router.push("/jump");
      }
    },
    handleScroll() {
      let ele = document.querySelector(".main");
      if (ele) {
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let offsetTop = 153;
        this.isHeaderFixed = scrollTop > offsetTop ? true : false;
      }
    },
    handleCenterMenuClick(active) {
      this.centerActive = active;
      this.bottomMenus = this.centerMenus[active].bottomMenus;
      // scroll action
      let root = $(".center-menus");
      let currentChild = $(".center-menu").eq(active);
      let rootWidth = root.outerWidth();
      let currentChildWidth = currentChild.outerWidth();
      let scrollWidth = root.scrollLeft();
      let offsetWidth = currentChild.position().left;
      let offsetLeft =
        offsetWidth + currentChildWidth - rootWidth + scrollWidth;
      if (offsetWidth > rootWidth - currentChildWidth) {
        root.animate({ scrollLeft: offsetLeft }, 200);
      } else if (offsetWidth < 0) {
        root.animate({ scrollLeft: scrollWidth + offsetWidth }, 200);
      }
    },
    spreadCode() {
      getSSCApplyInfo().then(res => {
        if (
          res.data &&
          (res.data.signFlag === "0" || res.data.signFlag === "2")
        ) {
          // 0未签发，1本渠道已签发，2其他渠道已签发
          this.apply(res.data); // 签发
        } else if (res.data && res.data.signFlag === "1") {
          this.showCode(res.data); //展码
        }
      });
    },
    showCode(data) {
      let url = location.href.split("?");
      let params = {
        channelNo: data.channelNo,
        signNo: data.signNo,
        returnUrl: url[0],
        isWeb: "1"
      };
      getSSCSign(params).then(res => {
        location.href = `${config.sscServer}/indep/ORCode?${res.data}`; // 展码
        // location.href = `${config.sscServer}/indep/veriPassWord?${res.data}`; // 密码认证
        // location.href = `${config.sscServer}/indep/cardInfo?${res.data}`;  // 卡面
      });
    },
    apply(data) {
      let url = location.href.split("?");
      let params = {
        channelNo: data.channelNo,
        // returnUrl: "/code",
        returnUrl: url[0],
        isWeb: "1"
      };
      getSSCSign(params).then(res => {
        location.href = `${config.sscServer}/main?${res.data}`;
      });
    },
    handleGo(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style lang="less">
@import "../../assets/css/home";
</style>
